import { Button, Skeleton, Spin } from "antd";
import { PropsWithChildren, useState } from "react";
import { SvgIcon } from "../../components/SvgIcon";
import { CaseResultItem } from "./CaseResultItem";
import { useRequest } from "ahooks";
import {
  fetchKgSearchCase,
  fetchKgSearchLaw,
} from "@/api/server/recommend_question";

interface ICaseResultListProps {
  className?: string;
  activeKey?: string;
  formValues?: any;
}
export function CaseResultList(props: PropsWithChildren<ICaseResultListProps>) {
  const { activeKey, formValues } = props;
  const [page, setPage] = useState(1);
  const [list, setList] = useState([]);

  const { data, loading } = useRequest(
    () => {
      return fetchKgSearchCase({
        query: activeKey,
        keyword: formValues.keyword,
        court: formValues.court?.join(",") || undefined,
        judgment_date:
          formValues.judgment_date
            ?.map((item) => item.format("YYYY"))
            ?.join(",") || undefined,
        case_status: formValues.case_status,
        current_page: page,
        page_size: 10,
      }).then((res) => {
        if (page === 1) {
          setList(res.data.results?.result);
        } else {
          setList((list) => list.concat(res.data.results?.result));
        }
        return res;
      });
    },
    {
      refreshDeps: [page, formValues],
    }
  );

  const onLoadMore = () => {
    setPage((p) => p + 1);
  };

  if (loading && page === 1) {
    return <Skeleton />;
  }

  return (
    <div className="flex flex-col">
      <div className="flex flex-row items-center gap-[4px]">
        <div className="bg-[#f2f3f7] text-[#585a73] text-[14px] border-[2px] border-solid border-[#f2f3f7] py-[4px] px-[8px]">
          <span className="max-w-[260px] overflow-hidden text-ellipsis whitespace-nowrap">
            关键词：{activeKey}
          </span>
        </div>
        <Button icon={<SvgIcon name="extend-goOn-line" />}>继续问</Button>
      </div>
      <div
        className="flex flex-row justify-between items-center py-[24px]"
        style={{ borderBottom: "1px solid #e6e8eb" }}
      >
        <div className="text-[#2c2c36] font-[500] text-[14px]">
          已为您检索到 {data?.data?.results?.total_count} 条相关案例
        </div>
        <div className="flex flex-row items-center gap-[16px] ">
          <div className="flex flex-row items-center gap-[8px] text-[#8f91a8] text-[14px] font-[500] cursor-pointer">
            其它案例
            <SvgIcon name="icon-jinrujiantou_default" />
          </div>
          <div className="flex flex-row items-center gap-[8px] text-[#8f91a8] text-[14px] font-[500] cursor-pointer">
            裁判日期
            <SvgIcon name="icon-a-paixu1x" />
          </div>
        </div>
      </div>
      <div className="flex flex-col gap-[24px] pt-[24px]">
        {list?.map((item) => {
          return <CaseResultItem key={item.uuid} info={item} />;
        })}

        <div className="flex flex-row justify-center pb-[32px]">
          {loading && <Spin />}
          {!loading &&
            (page === 1 ||
              (page > 1 && data?.data?.results?.result?.length > 0)) && (
              <div
                className="cursor-pointer text-[#2C79F1] bg-[#f2f7ff] py-[4px] px-[16px]  border border-solid border-white text-[14px]"
                onClick={() => onLoadMore()}
              >
                加载更多
              </div>
            )}
        </div>
      </div>
    </div>
  );
}
